<#-- 话单特殊日期分析 -->
<#include "../common/_header.htm">
<div class="content-wrapper" style="margin-left: 0;padding: 0">
    <section class="content">
        <div class="row">
            <div class="bill-right">
                <form id="listForm">
                    <div class="box">
                        <div class="box-header">
                            <div class="row RowSearchWork">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="form-inline">
                                            <div class="form-group ml10">
                                                <label class="control-label hidden-xs">对方号码</label>
                                                <input type="text" class="form-control" id="partyNumber" name="partyNumber" value="" placeholder="" />
                                                <input type="hidden" name="work" value="worked" />
                                            </div>
                                            <div class="form-group ml10">
                                                <label class="control-label">时间范围</label>
                                                <div class="input-group">
                                                    <div class="input-icon-group">
                                                        <input type="text" class="form-control fc-clear form_datetime" id="starTime" name="starTime" />
                                                        <span id="scan" class="glyphicon glyphicon-calendar">
												        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label hidden-xs"> 至 </label>
                                                <div class="input-group">
                                                    <div class="input-icon-group">
                                                        <input type="text" class="form-control fc-clear form_datetime" id="endTime" name="endTime" />
                                                        <span id="scan" class="glyphicon glyphicon-calendar">
												        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group ml10">
                                                <label class="control-label">出现次数>=</label>
                                                <input type="text" class="form-control" id="frequency" name="frequency" value="" placeholder="" />
                                            </div>
                                            <div class="form-group ml10">
                                                <input type="button" class="btn btn-primary" onclick="queryList();" value="分析" />
		                                        <input type="button" class="btn btn-default" onclick="reset();" value="重置" />
		                                        <input type="button" class="btn btn-primary daobtn" onclick="exportList();" value="导出" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="casemanage-switchtip">
                                <div class="casemanage-zhexiantu " :class="{active:showType==0}" @click="showType=0" title="切换为列表显示">
                                    <i class="casemanage-switchtip-list"></i><span>列表</span>
                                </div>
                                <div class="casemanage-map" @click="mapDialog()"  title="切换为地图显示">
                                <i class="casemanage-switchtip-map"></i><span>地图</span>
                            </div>
                                <input type="hidden" id="showType" value="0"/>
                            </div>
                            <div v-show="showType===0">
                                <table id="table"></table>
                            </div>
                            <div v-show="showType===2">
                                <div id="call_frequency_map"  style="height: 500px;width: 100%">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
</div>
<script type="text/javascript">
	var caseId=parent.caseId;
	$(document).ready(function(){
		 $(window).resize(function(){
			$('#table').datagrid('resize',{
                height:($(window).height())-($('.box-header').outerHeight(true))-40,
            });
		});
	});
    function mapDialog() {
        let partyNumber = $.trim($("#partyNumber").val());
        let starTime = $.trim($("#starTime").val());
        let frequency = $.trim($("#frequency").val());
        let endTime = $.trim($("#endTime").val());
        var param = {
            page : 1,  //页码
            rows : 30,  //页面大小
            cardList:cards.join(','),
            startTime:starTime,
            endTime:endTime,
            caseId:caseId,
            partyNumber:partyNumber,
            frequency:frequency,
        };
        if(parent.parent._checkedPhone.length>=1000){
            param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
        };
        var d = top.dialog({
            title : '特殊日期分析图',
            modal : true,
            url : '${ctx}/phoneAddress/specialdatemapDialog',
            height : 800,
            width : 1500,
            data : param,
            onshow : function () {
            }
        });
        d.show();
        return false;
    }
    function detailDialog(serviceNumber,lac,cid) {
        let partyNumber = $.trim($("#partyNumber").val());
        let starTime = $.trim($("#starTime").val());
        let frequency = $.trim($("#frequency").val());
        let endTime = $.trim($("#endTime").val());
        var param = {
            startTime:starTime,
            endTime:endTime,
            serviceNumber:serviceNumber,
            lac:lac,
            caseId:caseId,
            cid:cid,
            partyNumber:partyNumber,
            frequency:frequency,
        };
        if(parent.parent._checkedPhone.length>=1000){
            param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
        };
        var d = top.dialog({
            title : '特殊日期分析详情',
            modal : true,
            url : '${ctx}/phoneAddress/phonedetailDialog',
            height : 800,
            width : 1500,
            data : param,
            onshow : function () {
            }
        });
        d.show();
        return false;
    }
    //地图弹窗
    function showMap(){
        $("#hidebg-map").show();
        $("#hidebox-map").show();

    }
    function hideMap(){
        $("#hidebg-map").hide();
        $("#hidebox-map").hide();
    }
    var cards = new Array();
    new Vue({
        el:".box-body",
        data:{
            showType:0,
        }
    })


    /* 日期选择器start */
    $('#starTime').datepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        language:'zh-CN',
        pickerPosition:"bottom-left"
    })
    /* 日期选择器end */
    $('#endTime').datepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        language:'zh-CN',
        pickerPosition:"bottom-left"
    });
    window.onload = firsttable;
    function firsttable() {
        let partyNumber = $.trim($("#partyNumber").val());
        let starTime = $.trim($("#starTime").val());
        let frequency = $.trim($("#frequency").val());
        let endTime = $.trim($("#endTime").val());
        $('#table').datagrid({
            url: '${ctx}/phoneAddress/specialDate',
            fitColumns:true,
            queryParams: {
                cardList:cards.join(','),
                startTime:starTime,
                endTime:endTime,
                caseId:caseId,
                partyNumber:partyNumber,
                frequency:frequency,
            },
            height:($(window).height())-($('.box-header').outerHeight(true))-40,
            pageNumber:1,
            pageSize:30,
            pageList:[30,50,100,150,200],
            pagination:true,
            singleSelect: true,
            rownumbers: true,//行号
            columns: [[
                {
                    field: 'SERVICE_NUMBER',//域值
                    title: '嫌疑人号码',//标题
                    visible: true,//false表示不显示
                    sortable: false,//启用排序
                    width : '10%'
                },
                {
                    field: 'PARTY_NUMBER',//域值
                    title: '对方号码',//内容
                    visible: true,//false表示不显示
                    width : '20%'
                },
                {
                    field: 'BASE_STATION',//域值
                    title: '基站地址',//内容
                    visible: true,//false表示不显示
                    width : '20%'
                },
                {
                    field: 'COUNT',//域值
                    title: '出现次数',//内容
                    visible: true,//false表示不显示
                    width : '10%',
                    sortable: true,//启用排序
                    formatter:function (value,row,index) {
                        return '<a onclick="detailDialog(\''+row.SERVICE_NUMBER+'\',\''+row.LAC+'\',\''+row.CID+'\')" style="cursor:pointer;" data-toggle="modal" data-target="#myModal">'+value+'</a>';
                    }
                }
            ]],
            onLoadSuccess:function (result) {
                // initMap("hidebox-mContent",result.allRows);
            }
        });

    };

    function showD3() {
        let partyNumber = $.trim($("#partyNumber").val());
        let frequency = $.trim($("#frequency").val());
        let starTime = $.trim($("#starTime").val());
        let endTime = $.trim($("#endTime").val());
        var card = cards.join(',')
        var data = "partyNumber="+partyNumber+"&frequency="+frequency
            +"&startTime="+starTime+"&endTime="+endTime+"&cardList="+card+"&caseId="+caseId;
        $.ajax({
            url:"${ctx}/phoneAddress/getD3Result",//请求数据url
            data:data,
            dataType:'json',
            type:'post',
            success:function (obj) {
                if (obj.length>0){
                    D3utils.reload(obj,"#main");
                }
            }
        });
    }
    /*bootstrap table*/
    function queryList(){
        firsttable()
        // showD3();
    }
    function reset(){
        $("#starTime").val('');
        $("#endTime").val('');
        $("#partyNumber").val('');
        $("#frequency").val('');
    }
    function exportList(){
        let partyNumber = $.trim($("#partyNumber").val());
        let frequency = $.trim($("#frequency").val());
        let starTime = $.trim($("#starTime").val());
        let endTime = $.trim($("#endTime").val());
        var card = cards.join(',')
        window.location.href="${ctx}/phoneAddress/exportExcel/4?partyNumber="+partyNumber+"&frequency="+frequency
            +"&startTime="+starTime+"&endTime="+endTime+"&cardList="+card+"&caseId="+caseId;
    }
    if(parent.parent._checkedPhone.length){
        _checkedCallback()
    }
    function _checkedCallback(){
        cards = new Array();
        $.each(parent.parent._checkedPhone,function (i,n) {
            cards[i] ="'"+ n.split("_")[0]+"'";
        })
        firsttable();
    }

</script>
<style>
    .content{
        padding-top: 0;
    }
    input#partyNumber{
        width: 120px;
        height: 30px;
        border-radius: 0;
    }
    select#night{
        width: 120px;
        height: 30px;
        padding-top: 2px;
        border-radius: 0;
    }
    select#morning{
        width: 120px;
        height: 30px;
        padding-top: 2px;
        border-radius: 0;
    }
    input#starTime{
        width: 120px!important;
        height: 30px;
        border-radius: 0;
    }
    input#endTime{
        width: 120px!important;
        height: 30px;
        border-radius: 0;
    }
    input#frequency{
        width: 120px;
        height: 30px;
        border-radius: 0;
    }
    span#scan{
        top: 5px;
    }
    input.btn.btn-primary{
        width: 70px;
        height: 30px;
        line-height: 12px;
    }
    input.btn.btn-default{
        width: 70px;
        height: 30px;
        line-height: 12px;
    }
    input.btn.btn-primary.daobtn{
        background-color: #23B7E5;
        border-color: #23B7E5;
    }
    .casemanage-switchtip div:hover{
        border-radius: 0 4px 4px 0;
    }
    #hidebg-map {
        position:absolute;
        left:0px;
        top:0px;
        background-color:#000;
        width: 100%;
        height: 100%;
        filter:alpha(opacity=60);  /*设置透明度为60%*/
        opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
        display:none;
        z-Index:999;
    }
    #hidebox-map {
        text-align: right;
        position:absolute;
        width: 96%;
        height: 82%;
        top: 23px;
        left: 2%;
        border-radius: 5px;
        background-color:#fff;
        display:none;
        z-Index:9999;
        padding: 10px;
    }
    div#hidebox-mContent {
        width: 100%;
        height: 96%;
    }
    .outAccount_d3_head {
        float: left;
        font-size: 20px;
        margin-bottom: 5px;
    }
    #hidebox-map span{
        font-size: 20px;
    }
    svg {
        height: 96%;
        width: 100%;
    }
    .control-label{
        font-size: 13px;
        font-weight: 400;
    }
    .btn-primary{
        background-color:#4695ed;
        border-color:#4695ed;
    }
    .btn-primary:hover, .btn-primary:active, .btn-primary.hover{
        background: #61a8f5;
        border-color: #61a8f5;
    }
    .btn-primary.focus, .btn-primary:focus{
        background-color:#4695ed;
        border-color:#4695ed;
    }
    .casemanage-switch{
        margin-top: -2px;
        margin-right: 0;
    }

    .casemanage-switch .casemanage-list{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    .form-control{
        border-radius:4px;
        font-size: 12px;
        border-color: #e4e4e4;
    }
    .input-group .form-control:first-child{
        border-top-right-radius:4px;
        border-bottom-right-radius: 4px;
    }
    .form-control:focus{
        border-color:#4695ed;
    }
    .form-control:hover{
        border-color:#4695ed;
    }
    .box{
        padding: 0;
    }
    .content {
        padding: 5px 0 5px 31px;
    }
    .box-header{
        padding-top: 0;
    }
</style>